<template>
	<view>
		<view class="search2-top">
			<view class="search2-top-left" @click="backFn">
				<image class="search2-top-left-img" src="../../../static/images/search1/back.png" mode=""></image>
			</view>
			<view class="search2-top-center">
				婚姻登记服务
			</view>
			<view class="search2-top-right">
				<view class="search2-top-button">
					关于
				</view>
				<view class="search2-top-button">
					订阅
				</view>
			</view>
		</view>
	
		<view class="search2-center">
			<view class="scroll-container">
				<image class="laba" src="../../../static/images/marriage/laba.png" mode=""></image>
				<view class="box">
					<view class="content">
						预约在设区市范围内非户籍所在地婚姻登记机关办理婚姻登记的当事人，请务必通过网络预约方式提交预约申请，暂不受理电话或现场预约。
					</view>
				</view>
				<view class="aa">
					
				</view>
			</view>
			<!-- <image class="search2-center-img" src="../../../static/images/search1/IMG_49521@3x.png" mode="widthFix"></image> -->
			<image class="search2-center-img" src="../../../static/images/marriage/hunyinlist.png" mode="widthFix"></image>
		</view>
		<view class="marriageregistration" @click="nextToFn">
			<image class="marriageregistration-img" src="../../../static/images/search1/IMG_4893@3x.png" mode="widthFix"></image>
		</view>
		<view class="marriageregistration">
			<!-- <image class="marriageregistration-img" src="../../../static/images/search1/IMG_4896@3x.png" mode="widthFix"></image> -->
			<image class="marriageregistration-img" src="../../../static/images/marriage/tip.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script setup>
	const backFn = () => {
		uni.navigateBack(-1)
	}
	const nextToFn=()=>{
		uni.navigateTo({
			url:'/pages/marriageregistration/marriage'
		})
	}
</script>

<style lang="scss" scoped>
	.search2-top{
		height: 184rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		padding-top: 96rpx;
		display: flex;
		.search2-top-left{
			width: 10%;
			.search2-top-left-img{
				width: 88rpx;
				height: 88rpx;
			}
		}
		.search2-top-center{
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
			width: 60%;
			padding-left: 38rpx;
			line-height: 88rpx;
		}
		.search2-top-right{
			width: 30%;
			display: flex;
			.search2-top-button{
				width: 88rpx;
				height: 48rpx;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				opacity: 1;
				border: 2rpx solid #4678F0;
				line-height: 48rpx;
				text-align: center;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #4678F0;
				margin: auto;
				margin-right: 20rpx;
			}
			
		}
		
	}
	.search2-center{
		width: 100%;
		position: relative;
		.search2-center-img{
			width: 100%;
		}
	}
	.marriageregistration{
		width: 100%;
		.marriageregistration-img{
			width: 100%;
		}
	}
	.scroll-container {
		padding-left: 28rpx;
	  position: absolute;
	  top: 0;
	  left: 0;
	  display: flex;
	  z-index: 55;

		background: #E8EDFA;
		
		
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #1477FF;
	}
	.laba{
		width: 10%;
		padding-right: 14rpx;
		margin-top: 23rpx;
	}
	.box{
		width: 640rpx;
		// flex: 550rpx;
		height: 80rpx;
		overflow: hidden;
	}
	.aa{
		width: 28rpx;
		z-index: 77;
	}
	.content {
	  float: left;
	  width: auto;
	  line-height: 80rpx;
	  white-space: nowrap;
	  animation: textScroll 15s linear infinite;
	  z-index: -1;
	}
	
	@keyframes textScroll {
	  0% {
	    transform: translateX(640rpx); /* 初始位置 */
	  }
	  100% {
	    transform: translateX(-100%); /* 向上滚动 100% 的高度 */
	  }
	}
	.laba{
		width: 36rpx;
		height: 36rpx;
	}
</style>
